<template>
  <a-dropdown :trigger="['click']">
    <div class="j-vxe-ds-icons">
      <a-icon type="align-left" />
      <a-icon type="align-right" />
    </div>

    <!--    <div class="j-vxe-ds-btns">-->
    <!--      <a-button icon="caret-up" size="small" :disabled="disabledMoveUp" @click="handleRowMoveUp"/>-->
    <!--      <a-button icon="caret-down" size="small" :disabled="disabledMoveDown" @click="handleRowMoveDown"/>-->
    <!--    </div>-->

    <a-menu slot="overlay">
      <a-menu-item key="0" :disabled="disabledMoveUp" @click="handleRowMoveUp">向上移</a-menu-item>
      <a-menu-item key="1" :disabled="disabledMoveDown" @click="handleRowMoveDown">向下移</a-menu-item>
      <a-menu-divider />
      <a-menu-item key="3" @click="handleRowInsertDown">插入一行</a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
import JVxeCellMixins from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'

export default {
  name: 'JVxeDragSortCell',
  mixins: [JVxeCellMixins],
  computed: {
    // 排序结果保存字段
    dragSortKey() {
      return this.renderOptions.dragSortKey || 'orderNum'
    },
    disabledMoveUp() {
      return this.rowIndex === 0
    },
    disabledMoveDown() {
      return this.rowIndex === (this.fullDataLength - 1)
    }
  },
  methods: {
    /** 向上移 */
    handleRowMoveUp(event) {
      // event.target.blur()
      if (!this.disabledMoveUp) {
        this.trigger('rowMoveUp', this.rowIndex)
      }
    },
    /** 向下移 */
    handleRowMoveDown(event) {
      // event.target.blur()
      if (!this.disabledMoveDown) {
        this.trigger('rowMoveDown', this.rowIndex)
      }
    },
    /** 插入一行 */
    handleRowInsertDown() {
      this.trigger('rowInsertDown', this.rowIndex)
    }
  },
  // 【组件增强】注释详见：JVxeCellMixins.js
  enhanced: {
    // 【功能开关】
    switches: {
      editRender: false
    }
  }
}
</script>

<style lang="less">
.j-vxe-ds-icons {
  position: relative;
  /*cursor: move;*/
  cursor: pointer;
  width: 14px;
  height: 100%;
  display: inline-block;

  .anticon-align-left,
  .anticon-align-right {
    position: absolute;
    top: 30%;
  }

  .anticon-align-left {
    left: 0;
  }

  .anticon-align-right {
    right: 0;
  }
}

.j-vxe-ds-btns {
  position: relative;
  cursor: pointer;
  width: 24px;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;

  .ant-btn {
    border: none;

    z-index: 0;
    padding: 0;
    width: 100%;
    /*height: 30%;*/
    height: 40%;
    display: block;
    border-radius: 0;

    &:hover {
      z-index: 1;
      /*  height: 40%;*/

      /*  & .anticon-caret-up,*/
      /*  & .anticon-caret-down {*/
      /*    top: 2px;*/
      /*  }*/
    }

    &:last-child {
      margin-top: -1px;
    }

    & .anticon-caret-up,
    & .anticon-caret-down {
      vertical-align: top;
      position: relative;
      top: 0;
      transition: top 0.3s;
    }
  }
}
</style>